<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import { getCurrentInstance, redirectTo, showLoading, hideLoading } from '@tarojs/taro';
import { Right as AppNutIconRight } from '@nutui/icons-vue-taro';
import { LOGIN_APP } from '/@/api/modules/base/app-sys-user';
import { COOPERATE_APP_TASK } from '/@/api/modules/order/app-work-order';
import { QUERY_WORK_ORDER_EVENT_OPINION_SETTING_LIST } from '/@/api/modules/order/work-order-event-opinion-setting';

/**
 * @description 当前路由信息
 */
const params = getCurrentInstance().router?.params as {
  id: string;
  from?: string;
  assetId?: string;
};

const workOrderCooperateForm = ref();

const state = reactive<{
  /**
   * 用户列表弹出层是否显示
   */
  appUserListPopupIsShow: boolean;
  /**
   * 工单快捷回复列表
   */
  workOrderEventOpinionSettingList: AppSysWorkOrder.EventOpinionSettingDto[];
}>({
  appUserListPopupIsShow: false,
  workOrderEventOpinionSettingList: [],
});

const formState = reactive<{
  workOrderEventDto: AppSysWorkOrder.eventDto;
  workOrderDto: AppSysWorkOrder.Dto;
}>({
  workOrderEventDto: {
    workOrderId: '',
    handleUserId: '',
    handleUserName: '',
    handleTime: undefined,
    opinion: '',
  },
  workOrderDto: {
    id: '',
  },
});

function submit() {
  showLoading();

  LOGIN_APP().then((res) => {
    formState.workOrderDto.id = params.id;
    formState.workOrderEventDto.workOrderId = params.id;
    formState.workOrderEventDto.handleUserId = res.sysUserDto.id;
    formState.workOrderEventDto.handleUserName = res.sysUserDto.name;
    formState.workOrderEventDto.handleTime = new Date().valueOf();

    COOPERATE_APP_TASK(formState).then(() => {
      formState.workOrderEventDto = {
        workOrderId: '',
        handleUserId: '',
        handleUserName: '',
        handleTime: undefined,
        opinion: '',
        workOrderEventFileDto: [],
      };
      formState.workOrderDto = {
        id: '',
        workOrderPreAssetDto: [],
      };
      const url = `/pages/work-order/cooperate-success/index?id=${params.id}`;

      hideLoading();
      redirectTo({
        url: params.from ? url + `&from=${params.from}&assetId=${params.assetId}` : url,
      });
    });
  });
}

onMounted(() => {
  showLoading();

  QUERY_WORK_ORDER_EVENT_OPINION_SETTING_LIST({
    workOrderEventOpinionSettingDto: {
      eventCode: 'cooperate_task',
    },
    comQuery: {
      page: 1,
      pageSize: 100,
    },
  }).then((res) => {
    hideLoading();
    state.workOrderEventOpinionSettingList = res.workOrderEventOpinionSettingDto;
  });
});
</script>

<template>
  <view class="work-order-cooperate app-page--1">
    <app-navbar title="协同" />
    <scroll-view class="app-page__wrapper" :scroll-y="true" :lower-threshold="100">
      <view class="work-order-cooperate__wrapper">
        <nut-form
          :model-value="formState"
          class="work-order-cooperate__form"
          ref="workOrderCooperateForm"
        >
          <nut-form-item label="选择处理人">
            <view
              class="work-order-cooperate__assign-user-wrapper"
              @click="state.appUserListPopupIsShow = !state.appUserListPopupIsShow"
            >
              <text>{{ formState.workOrderEventDto.assignUserName || '请选择' }}</text>
              <app-nut-icon-right />
            </view>
          </nut-form-item>
          <nut-form-item class="nut-form__title-wrapper" label="协同意见" />
          <nut-form-item>
            <nut-textarea
              v-model="formState.workOrderEventDto.opinion"
              placeholder="请输入协同意见"
              rows="8"
              limit-show
              text-align="left"
              max-length="200"
            />
          </nut-form-item>
          <nut-form-item>
            <view class="work-order-cooperate__quick-reply-wrapper">
              <view class="work-order-cooperate__quick-reply-wrapper--left">
                <text>快速回复:</text>
              </view>
              <view class="work-order-cooperate__quick-reply-wrapper--right">
                <nut-button
                  class="work-order-cooperate__btn"
                  v-for="item in state.workOrderEventOpinionSettingList"
                  :key="item.id"
                  type="default"
                  size="mini"
                  @click="
                    () => {
                      formState.workOrderEventDto.opinion = item.opinion;
                    }
                  "
                >
                  {{ item.opinion }}
                </nut-button>
              </view>
            </view>
          </nut-form-item>
        </nut-form>
      </view>
    </scroll-view>
    <view class="work-order-cooperate__footer">
      <nut-button block type="info" @click="submit">
        <text>提交</text>
      </nut-button>
    </view>
    <app-user-list-popup
      v-model="state.appUserListPopupIsShow"
      title="处理人"
      @on-selected="(user: AppSysUser.Dto) => {
        formState.workOrderEventDto.assignUserName = user.name;
        formState.workOrderEventDto.assignUserId = user.uaaUserId;
        formState.workOrderEventDto.assignUserPhone = user.phone;
      }"
    />
  </view>
</template>

<style lang="scss">
@import './index.scss';
</style>
